<template>
    <div class="rightMain">
        <!--右侧顶部导航-->
        <div class="rightTop">
            <div class="mapDiv f1">
                <div class="tt1">
                    <div class="tt2">{{ $t('text.Neighbourhoods.l4') }}</div>
                    <div class="tt3">{{ $t('text.Neighbourhoods.l16') }}</div>
                </div>
            </div>

            <TimePageNavList :timeNavList="timeNavList.data" :defaultClick="timeNavList.defaultClick"
                @returnData="setHouseType"></TimePageNavList>

            <div class="f1" style="display: flex;justify-content: flex-end;">
                <CommonSelectRouter :dataList="sortRouterList.data" :default="sortRouterList.default" ref="child1"
                    :myStyles="{ width: 'auto' }" @returnData="setSort" isShowSortImg>
                </CommonSelectRouter>
            </div>
        </div>
        <!--右侧房源数据列表-->
        <div class="rightMain2">
            <div class="rightList">
                <HouseList :data="houseList"></HouseList>
            </div>
        </div>

        <!--底部分页-->
        <div class="setPage">
            <el-pagination v-model:current-page="searchData.page" v-model:page-size="searchData.size"
                :page-sizes="[10, 15, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

    </div>
</template>
    
<script>
import TimePageNavList from '@/components/navigation/TimePageNavList.vue';
import { findPageByParam } from '../../http/api';
import CommonSelectRouter from '@/components/input/CommonSelectRouter.vue';
import HouseList from '@/components/houseList/HouseList.vue';
export default {
    components: {
        TimePageNavList,
        CommonSelectRouter,
        HouseList
    },
    props: {
    },
    data() {
        return {
            timeNavList: {
                defaultClick: this.$t('text.Neighbourhoods.l13'), data: [this.$t('text.Neighbourhoods.l13'), this.$t('text.Neighbourhoods.l14'), this.$t('text.Neighbourhoods.l15')]
            },
            sortRouterList: {
                default: this.$t("text.Neighbourhoods.l39"),
                data: [
                    { id: 1, name: this.$t("text.Neighbourhoods.l39") },
                    { id: 2, name: this.$t("text.Neighbourhoods.l40") },
                    { id: 3, name: this.$t("text.Neighbourhoods.l41") },
                    { id: 4, name: this.$t("text.Neighbourhoods.l42") },
                ]
            },
            houseList: [],
            searchData: { houseClass: 0, page: 1, size: 15, communityId_EQ: this.$route.query.id },
            total: 0
        }
    },
    mounted() {
        this.search()
    },
    methods: {
        search() {
            findPageByParam(this.searchData).then(res => {
                if (res !== undefined) {
                    this.houseList = res.dataList
                    this.total = res.total
                }
            }).catch()
        },
        setHouseType(index) {
            switch (index) {
                case 0: this.searchData = { houseClass: 0, page: 1, size: 15, communityId_EQ: this.$route.query.id }; break;
                case 1: this.searchData = { houseClass: 1, page: 1, size: 15, communityId_EQ: this.$route.query.id }; break;
                case 2: this.searchData = { page: 1, size: 15, communityId_EQ: this.$route.query.id, dealStatus_BEGIN:2,dealStatus_END:3}; break;
            }
            this.search();
        },
        handleCurrentChange(val) {
            this.searchData.page = val
            this.search()
        },
        handleSizeChange(val) {
            this.searchData.size = val
            this.search()
        },
        setSort(index) {
            let obj
            switch (index) {
                case 1: obj = { price_ORDER: "DESC" }; break;
                case 2: obj = { price_ORDER: "ASC" }; break;
                case 3: obj = { buildingYears_ORDER: "DESC" }; break;
                case 4: obj = { buildingYears_ORDER: "ASC" }; break;
            }
            this.searchData = { ...this.clearData2({ price_ORDER: '', buildingYears_ORDER: '' }), ...obj }
            this.search();
        },
        //清除只返回值
        clearData2(obj) {
            const objKeys = Object.keys(obj);
            return Object.keys(this.searchData).reduce((acc, key) => {
                if (!objKeys.includes(key)) {
                    acc[key] = this.searchData[key];
                }
                return acc;
            }, {});
        },
    },
    watch: {
    },
    computed: {
    }

}
</script>
    
<style scoped>
.rightMain {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
}

.rightMain2 {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    padding-left: 35px;
    padding-right: 15px;
    padding-bottom: 5px;
}

.rightTop {
    display: flex;
    padding-top: 10px;
    align-items: center;
}

.f1 {
    flex: 1;
}

.mapDiv {
    display: flex;
    padding-left: 15px;
    font-size: 13px;
    color: #6698ff;
    align-items: center;
}

.rightList {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    border: 1px solid #dadada;
    border-radius: 4px;
}

.setPage {
    margin-bottom: 35px;
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
}

.tt1 {
    display: flex;
    text-align: left;
    flex-direction: column;
    padding-left: 40px;
}

.tt2 {
    color: black;
    font-size: 14px;
}

.tt3 {
    color: gray;
    font-size: 13px;
    padding-top: 5px;
    padding-bottom: 20px;
}
</style>